<!--注册-->


<!--模板-->
<template>
  <div class="registerbg">
      <div style="display: flex; background-color: white; width: 50%; height: 55%; border-radius: 7px; overflow: hidden">
          <!--将flex拆分、left：输入框及按钮-->
          <div style="flex: 1; display: flex; align-items: center; justify-content: center">
              <el-form ref="formRef" :model="data.form" :rules="data.rules" style="width: 80%">
                  <div style="font-size: 20px; font-weight: bold; text-align: center; margin-bottom: 20px">
                      ITCACP注册
                  </div>
                  <!--用户名-->
                  <el-form-item prop="username">
                      <el-input size="default" placeholder="请输入账号" v-model="data.form.username" prefix-icon="User" autocomplete="off"></el-input>
                  </el-form-item>
                  <!--邮箱-->
                  <el-form-item prop="email">
                      <el-input size="default" placeholder="请输入邮箱" v-model="data.form.email" prefix-icon="Message" autocomplete="off"></el-input>
                  </el-form-item>
                  <!--密码-->
                  <el-form-item prop="password">
                      <el-input show-password size="default" placeholder="请输入密码" v-model="data.form.password" prefix-icon="Lock" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item>
                      <el-button type="success" style="width: 100%" size="large" @click="register">注 册</el-button>
                  </el-form-item>
                  <div style="text-align: left">已有账号？去<a style="color: cornflowerblue" href="/Login">登录</a></div>
              </el-form>
              <!--错误提示-->
          </div>
          <!--将flex拆分、right：存放图片-->
          <div style="flex: 1; display: flex; align-items: center; justify-content: center">
              <img src="@/assets/imge/register.png" alt="注册背景图" style="width: 100%">
          </div>
      </div>
  </div>
</template>

<!--逻辑-->
<script setup>
import { reactive, ref } from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";

const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
//响应式API：ref用于包装基本数据类型或单一值 / 引用组件实例
const formRef = ref();
// 响应式API：reactive用于包装对象或数组，返回一个响应式对象
const data = reactive({
    form: {

    },
    rules: {
        username: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            //trigger指定验证触发的时机,'blur'：表示当表单字段失去焦点时触发验证,'change'：表示当表单字段的值发生变化时触发验证
            { min: 3, message: '账号最少3位', trigger: 'blur' },
            { max: 20, message: '账号最多20位', trigger: 'blur' },
            // { pattern: /^[a-zA-Z0-9]+$/, message: '账号只能包含字母和数字', trigger: 'blur' }
        ],
        password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            {min: 6, message: '账号最少6位', trigger: 'blur'},
        ],
        email: [
            { required: true, message: '请输入电邮', trigger: 'blur' },
            // pattern（正则表达式匹配）
            {pattern: emailRegex, message: '邮件格式不符', trigger: "blur"},
            { max: 40, message: '最多输入40位', trigger: 'blur' },
        ],
    }
})

// 注册逻辑
const register = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            try {
                request.post('/api/users/register', data.form).then(res => {
                    if (res.code === '200') {
                        // 存储用户信息、  JSON.stringify(res.data：对象转化为json格式
                        localStorage.setItem("code_user", JSON.stringify(res.data || {}));
                        ElMessage.success("注册成功");
                        router.push('/login');
                    } else if (res.code === '500') {
                        ElMessage.error(res.msg);
                    } else {
                        ElMessage.error('注册失败: ', res.msg);
                        ElMessage.error();
                    }
                })
            } catch (error) {
                ElMessage.error('请求出错: ', error);
            }
        }
    })
}
</script>

<!--样式-->
<<style>
.registerbg {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-image: url("@/assets/imge/registerbg.jpg");
    background-size: cover;
}
</style>